<template>
	<view class="editName">
		<comHead title="修改群聊名称" :isLeft="true" :isRight="false"></comHead>
		
		<view class="contentBox">
			<text>修改群聊名称后，将在群内通知其他成员</text>
			<view class="inputBox">
				<input type="text" v-model="ipt" maxlength="20" placeholder="请输入新昵称"/>
				<image src="https://siha.vxmeng.com/static/index/close.png" mode="widthFix"></image>
			</view>
			<view class="br">
				{{ipt.length}}/20
			</view>
			<view class="btn" @click="doEditQunname">
				<text>完成</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ipt: '',
				id:''
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		methods: {
			async doEditQunname() {
				const res = await this.$myRequest({
					url: 'api/qun/doEditQunname',
					data: {
						qun_id: this.id,
						name:this.ipt
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.$tools.showTx(res.msg)
					setTimeout(()=>{
						this.$tools.toBack()
					},1000)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
.editName{
	.contentBox{
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		text{
			margin-top: 40rpx;
		}
		.top{
			margin-top: 100rpx;
			font-size: 36rpx;
		}
		.inputBox{
			width: 100%;
			height: 112rpx;
			margin-top: 80rpx;
			border-radius: 20rpx;
			padding: 0 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: linear-gradient(100deg, #2A2832 0%, rgba(30, 36, 44, 0.65) 100%);
			input{
				flex: 1;
				height: 50rpx;
			}
			image{
				width: 32rpx;
			}
		}
		.br{
			width: 100%;
			padding: 20rpx;
			text-align: end;
		}
		.btn{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			margin-top: 20rpx;
			background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
		}
	}
}
</style>
